<template>
	<div class="header">
		<Gheader :showheader="data"></Gheader>
			<scroll class="warp">
				<div>
					<div v-if="address.length==0" class="waarp">
						<div class="map">
							<img src="../../../assets/G-img/Shippingaddress/地图.png"/>
							
						</div>
						<span @click="jump">添加新地址</span>
					</div>
					<ul class="pieceaddress" v-else>
						<li v-for="(item,index) in address" class="comprehensive">
							<h3 class="name">{{item.name}}</h3>
							<h3 class="phone">{{item.phone}}</h3>
							<p class="addess">{{item.addess}}</p>
							<h3 class="Zipcode">{{item.Email}}</h3>
							<span class="choose">
								<hr></hr>
								<input type="checkbox" name="" id="" value="" />
								<h3 class="defaultfont">默认地址</h3>
								<span class="aaa">
									<img src="../../../assets/G-img/Shippingaddress/编辑.png" class="editor"/>
									<h3 class="editorfont">编辑</h3>
									<img src="../../../assets/G-img/Shippingaddress/删除.png" class="remove"/>
									<h3 class="removefont">删除</h3>
								</span>
							</span>
							
						</li>
					</ul>
				</div>
			</scroll>
	</div>
</template>

<script>
	import Gheader from "../person-center/Gheader"
	import Scroll from "../../../../base/Scroll"
	export default{
		name:"AddNewAddress",
		data(){
			return{
				address:[],
				data:{
					word:"收货地址",
					left:[true,false,false],
					right:[false,false,false,false,false,false],
					leftword:"",
					rightword1:"添加新地址",
					rightword2:""
				}
			}
		},
		methods:{
			jump:function(){
				this.$router.push({path:"/AddDeliveryAddress"})
			}
		},
		components:{
			Gheader,
			Scroll
		}
	}
	
	
	
	
	
	
	
</script>

<style scoped="scoped">
	.warp{
		height: 90vh;
	}
	.addaddress{
		overflow: hidden;
		height: 90vh;
		text-align: center;
	}
	.header{
		width: 100%;
		height: 100vh;
		background-color: #efefef;
	}
	.waarp{
		text-align: center;
	}
	.waarp span{
		padding: 0.5rem 2rem;
		background-color: white;
		border-radius: 5rem;
		font-size: 1.2rem;
		border: 1px solid #3c3c3c;
	}
	.map{
		text-align: center;
	}
	.map img{
		width: 40%;
		height: 40%;
		margin-top: 10vh;
		margin-bottom: 3vh;
	}
	.pieceaddress li:first-child{
		background-color: white;
	}
	.addaddress span{
		padding: 0.6rem 2rem;
		background: white;
		display: inline-block;
		font-size: 1.2rem;
		color: #3c3c3c;
		border-radius: 10rem;
		border: 1.5px solid #3c3c3c;
	}
	.comprehensive{
		background-color: white;
		margin-bottom: 1.2rem;
	}
	h3{
		display: inline-block;
	}
	.addess,.Zipcode{
		color: #6c6c6c;
	}
	.name{
		font-size: 1.5rem;
		font-weight: 300;
		color: #3c3c3c;
		margin-left: 1.2rem;
		margin-top: 1rem;
	}
	.phone{
		font-size: 1.3rem;
		font-weight: 300;
		margin-left: 2rem;
		color: #3c3c3c;
	}
	.addess{
		font-size: 1.1rem;
		font-weight: 200;
		margin-top: 0.5rem;
		line-height: 1.8rem;
		margin-left: 1.2rem;
		margin-right: 0.5rem;
	}
	.Zipcode{
		font-feature-settings: 1.1rem;
		font-size: 1.2rem;
		font-weight: 200;
		line-height: 2.5rem;
		margin-left: 1.2rem;
	}
	.Greatcircle{
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		border: 1px solid #d72532;
		display: inline-block;
		text-align: center;
		
	}
	.aaa .editorfont{
		margin-right: 1rem;
		vertical-align: baseline;
	}
	.Smallround{
		width: 1.3rem;
		height: 1.3rem;
		border-radius: 50%;
		display: inline-block;
		background-color: #d72532;
		line-height: 1.3rem;
	}
	.editor,.remove{
		width: 1.2rem;
		height: 1.2rem;
		vertical-align: baseline;
	}
	.choose h3{
		font-size: 1.1rem;
		font-weight: 400;
		color: #3c3c3c;
		margin-top: 1rem;
	}
	.defaultfont{
		margin-left: 0.5rem;
		/*margin-bottom: 1.5rem;*/
	}
	.aaa{
		float: right;
		margin-right: 1rem;
	}
	
	  /*单选框自定义样式*/
    input[type=checkbox]{
        /*去除浏览器默认样式*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        /*自定义样式*/
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 1.8rem;
        height: 1.8rem;
        border: 1px solid #d72532;
        outline: none;
        cursor: pointer;
        /*设置为圆形，看起来是个单选框*/
        -webkit-border-radius: 1.8rem;
        -moz-border-radius:1.8rem;
        border-radius: 50%;
        margin-top: 0.8rem;
        margin-left: 1rem;
        margin-bottom: 0.8rem;
    }
     /**
    * 单选框 选中之后的样式
    **/
    input[type=checkbox]:after{
        content: '';
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        display: block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #d72532;
        -webkit-border-radius: 1.2rem;
        -moz-border-radius: 1.2rem;
        border-radius: 5rem;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        /*增加一些动画*/
        -webkit-transition : all ease-in-out 300ms;
        -moz-transition : all ease-in-out 300ms;
        transition : all ease-in-out 300ms;
    }
    input[type=checkbox]:checked:after{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
</style>